import React, { useEffect } from 'react'
import { Input, Button, Row } from 'antd'
import styles from './index.less'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { post } from '@/utils/ request'
import { useRequest } from 'umi'
import { ApiReturn } from '@/types/global'


const login = (username: string, password: string) => {
  return post('/api/v1/user/login', {
    username,
    password,
  })
}

const Index: React.FC = () => {


  const loginFunc = useRequest(login, {
    manual: true,
    onSuccess: (token) => {
      if (token) {
        window.localStorage.setItem('token', String(token))
      }
    }
  })

  useEffect(() => {
    loginFunc.run('tom11', '123456')
  }, [])




  return (
    <div className={styles.loginContainer}>
      <div className={styles.loginForm}>
        <Row>
          <div className={styles.title}>XXX流程体验系统</div>
        </Row>
        <Row>
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            v-model="user.userId"
            placeholder="请输入账户"
          ></Input>
        </Row>
        <Row>
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            v-model="user.password"
            type="password"
            placeholder="请输入密码"
          ></Input>
        </Row>
        <Row>
          <Button
            className={styles.loginBtn}
            type="primary"
          >登录</Button >
        </Row>
      </div>
    </div>
  )
}

export default Index
